<template>
	<uni-nav-bar title="加团客户" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
	<view class="package_sale datas" style="padding: 10px 0px;margin-bottom:10rpx;">
		<uni-datetime-picker v-model="range" type="daterange" :border="false" :clear-icon="false" rangeSeparator="至"
			@change="change" />
	</view>
	<scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box"
		:style="{ height: pageHeight + 'px' }">
		<view class="package_sale" v-for="item in orderLists" :key="item.id">
			<view class="space-between">
				<view class="center" style="width:73%;">
					<image :src="item.driver_avatar" mode=""></image>
					<text class="name">{{item.driver_name}}</text>
				</view>
				<view v-if="item.status==1" style="color:#FF971C">可参与膨胀</view>
				<view v-if="item.status==3" style="color:#FF971C">已膨胀</view>
			</view>
			<view class="space-between">
				<view>{{item.team_name}}</view>
				<view>{{item.createtime}}</view>
			</view>
			<view class="space-between" v-if="item.status==2">
				<view></view>
				<view class="but" @click="tipsOpen(item.driver_name,item.id)">绑定邀新保障额度</view>
			</view>
		</view>
		<Popu v-if="orderLists.length<1" :pageHeight="pageHeight" text="暂无加团客户"></Popu>
	</scroll-view>
	<!-- 邀请得温馨提示 -->
	<uni-popup ref="tips" type="center" style="z-index: 910">
		<view class="package column" style="width:650rpx;padding:30rpx 30rpx 50rpx 30rpx;">
			您已获得车友{{name}}的邀新保障额度200元，该车友后续消费您可获得邀新保障额度释放奖励
		</view>
	</uni-popup>
</template>

<script setup lang="ts">
	import { navBack, navTo } from '@/utils/navigator';
	import Popu from '@c/earthPushing/common/popu.vue';
	import { getStaffTeamDriver } from '@/gql/earthPushing/teamJoin';
	import { errorToast, showLoading, successToast } from '@/utils/prompt';
	import { toPublish } from '@mqtt';
	import { ref } from 'vue';
	import { getDriverID } from '@/stores/driverID';
	import { format, subDays } from 'date-fns';
	const staff_id = getDriverID();
	let now = new Date();
	let end = format(now, 'yyyy-MM-dd');
	let daysAgo = subDays(now, 6);
	let start = format(daysAgo, 'yyyy-MM-dd');
	const range = ref([start, end]);

	const orderLists = ref([]);
	const isLoading = ref(false);
	const lastPage = ref(1);
	const currentPage = ref(1);
	// 温馨提示
	const tips = ref(null)
	const name = ref()
	const pageHeight = ref();
	uni.getSystemInfo({
		success: function (res) {
			pageHeight.value = res.windowHeight - 120;
		},
	});
	init()
	function init() {
		showLoading()
		isLoading.value = true;
		const payload = {
			query: getStaffTeamDriver,
			variables: {
				page: currentPage.value,
				staff_id,
				start,
				end,
			},
		};
		toPublish(
			'ql/staff/getStaffTeamDriver',
			payload,
			(obj : any) => {
				const { getStaffTeamDriver } = obj.data;
				isLoading.value = false;
				orderLists.value = [...orderLists.value, ...getStaffTeamDriver.list];
				lastPage.value = getStaffTeamDriver.lastpage;
			}
		);
	}
	/**
	 * 加载更多
	 */
	function loadMore() {
		if (currentPage.value < lastPage.value) {
			currentPage.value++;
			init();
		}
	}
	/**
	 * 时间筛选
	 * @param sta  开始时间
	 * @param en  结束时间
	 */
	function change([sta, en]) {
		start = sta;
		end = en;
		currentPage.value = 1
		orderLists.value = []
		init()
	}
	function tipsOpen(names : string, id : number) {
		name.value = names
		showLoading()
		const payload = {
			staff_id,
			id,
		};
		toPublish('staff/qiangEdu',
			payload,
			(obj : any) => {
				const { code, msg } = obj;
				if (code === 1) {
					successToast(msg)
					tips.value.open()
					currentPage.value = 1
					orderLists.value = []
					init()
				} else {
					errorToast(msg)
				}
			}
		);
	}
</script>

<style scoped lang="less">
	image {
		width: 66rpx;
		height: 66rpx;
		background: #EAEAEA;
		border-radius: 50%;
		margin-right: 10rpx;
		margin: 0px 10rpx 20rpx 0px;
	}

	.name {
		display: inline-block;
		width: 80%;
	}

	.package_sale {
		margin: 0px;
		border-bottom: 1px solid #eee;
	}

	.but {
		width: 280rpx;
		height: 88rpx;
		text-align: center;
		line-height: 88rpx;
		background-color: #558AF1;
		color: #fff;
		border-radius: 5px;
		margin-top: 25rpx;
	}
</style>
<style>
	.datas>>>.uni-date__x-input {
		font-size: 32rpx !important;
	}

	.datas>>>.uni-date-x {
		font-size: 32rpx !important;
	}

	.datas>>>.uni-icons {
		font-size: 48rpx !important;
	}

	.datas>>>.uni-date-x {
		padding: 0px 0px 0px 10rpx;
	}
</style>